<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="root">
        <h3>{{num}}</h3>
        <!--    未简写：-->
        <!-- 1-语句    -->
        <button v-on:click="num++">加1</button>
        <!-- 2-函数:当点击按钮会调用Vue实例中的函数changeNum    -->
        <!--    <button v-on:click="changeNum">加2</button>-->
        <!-- 3-调用函数:函数名后加括号不会被立即调用    -->
        <!--    <button v-on:click="changeNum2(3,$event)">加3</button>-->

        <!-- 1-语句    -->
        <button @click="num++">加1</button>
        <!-- 2-函数:当点击按钮会调用Vue实例中的函数changeNum    -->
        <button @click="changeNum">加2</button>
        <!-- 3-调用函数:函数名后加括号不会被立即调用    -->
        <button @click="changeNum2(3,$event)">加3</button>
    </div>
</body>
<script>
    // 语句：如果操作语句比较简单，建议直接写语句
    // 函数：如果操作比较复杂或要在多个不同的地方调用且不需要传递参数使用函数
    // 调用函数：如果操作比较复杂或要在多个不同的地方调用且需要传递参数使用调用函数
    //         如果要传递事件对象可以通过$event
    // v-on可以简写：@
    new Vue({
        el: "#root",
        data: {
            num: 0
        },
        methods: {
            changeNum(e) {
                this.num += 2;
                // console.log("changeNum",this)
                // console.log(e.target.innerText)
            },
            changeNum2(num, e) {
                this.num += num;
                // console.log("changeNum2",num)
                console.log(e.target.innerText)
            }
        }
    })
</script>
</html>